<template>
    <div>
        <div class="container-header">
            <div class="container-logo"></div>
            <div class="container-items">
                <span>全局</span>
                <span>导出数据</span>
                <span>切换背景</span>

            </div>
        </div>
        <div class="container-body">
            <div class="container-left"></div>
            <div ref="dom" id="container-middle" class="container-middle"></div>
            <div class="container-right width-transition" :class="isShowDialog ? 'ShowDialog' : 'noShowDialog'">
                <a-tabs default-active-key="1" size="small">
                    <a-tab-pane key="1" title="基本配置">
                        <setCard>
                            <template #cardHeader>
                                <preBar :items="{ title: '节点基本属性' }" />
                            </template>
                            <template #cardBody>
                                <div class="card-body">
                                    <div class="card-item">
                                        <span class="card-item-label">ID</span>
                                        <div class="card-item-content"><a-input :disabled="true" class="inputWidth"
                                                v-model="currentNode.id"></a-input></div>
                                    </div>
                                    <div class="card-item">
                                        <span class="card-item-label">名称</span>
                                        <div class="card-item-content"><a-input v-model="currentNode.label"
                                                class="inputWidth" @input="changeInfo"></a-input>
                                        </div>
                                    </div>
                                    <div class="card-item">
                                        <span class="card-item-label">title</span>
                                        <div class="card-item-content"><a-input v-model="currentNode.title"
                                                class="inputWidth" @input="changeInfo"></a-input>
                                        </div>
                                    </div>
                                    <div class="card-item">
                                        <span class="card-item-label">Top</span>
                                        <div class="card-item-content"><a-input-number v-model="currentNode.top"
                                                class="inputWidth" :disabled="true"></a-input-number>
                                        </div>
                                    </div>
                                    <div class="card-item">
                                        <span class="card-item-label">Left</span>
                                        <div class="card-item-content"><a-input-number v-model="currentNode.left"
                                                class="inputWidth" :disabled="true"></a-input-number>
                                        </div>
                                    </div>
                                    <div class="card-item">
                                        <span class="card-item-label">颜色</span>
                                        <div class="card-item-content">
                                            <pick-colors v-model:value="currentNode.color" @change="changeInfo"/>
                                        </div>
                                    </div>
                                    <div class="card-item">
                                        <span class="card-item-label">icon</span>
                                        <div class="card-item-content"><a-input v-model="currentNode.icon"
                                                class="inputWidth" @input="changeInfo"></a-input>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </setCard>
                    </a-tab-pane>
                    <a-tab-pane key="2" title="事件配置">
                        <setCard />
                    </a-tab-pane>
                </a-tabs>
                <div id="btnShow" @click="showDialog">
                    <icon-caret-right style="font-size: 18px;"
                        :class="isShowDialog ? 'ShowDialogIcon' : 'noShowDialogIcon'" />
                    <!-- transform: rotate(180deg); -->
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { Canvas } from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';
import 'butterfly-dag/plugins/panel/dist/index.css';
import PickColors from 'vue-pick-colors'
// layout
import setCard from "../../components/setCard.vue";
import preBar from '../../components/preBar.vue';
//节点
import NodeClassInit from "./components/node/nodeInit/node";
import NodeClassEnd from "./components/node/nodeEnd/node";
//连线
import EdgeClassEnd from "./components/edge/edgeDefault/edge";
const selectColor = ref('#ff4500')

let canvas: Canvas = reactive({});
const nodes = ref({
    nodeArr: [
        {
            id: "1",
            top: 10,
            left: (document.body.clientWidth - 180) / 4,
            type: "init",
            Class: NodeClassInit,
        },
        {
            id: "2",
            x: 300,
            y: (document.body.clientWidth - 180) / 4,
            type: "end",
            Class: NodeClassEnd,
        },
    ],
});
const edges = reactive({
    edgeArr: [{
        id: "e1",
        source: "1",
        target: "2",
        Class: EdgeClassEnd,
    }
    ]
});
let currentNode = ref({
    id:''
})

let dom = document.getElementById("container");
const isShowDialog = ref(false)
const showDialog = () => {
    isShowDialog.value = !isShowDialog.value
}
onMounted(() => {
    canvas = new Canvas({
        root: dom,//canvas的根节点(必传)
        // layout: { type: 'ForceLayout', options: {} },   //布局设置(选填)，可使用集成的，也可自定义布局
        // layoutOptions: { rankdir: 'TB' }, // 布局配置(选填)，传入集成/自定义布局的参数
        zoomable: true,          //可缩放(选填)
        moveable: true,          //可平移(选填)
        draggable: true,         //节点可拖动(选填)
        linkable: true,          //节点可连接(选填)
        disLinkable: true,       //节点可取消连接(选填)
        // theme: {                 //主题定制(选填) 
        //     group: {
        //         type: 'normal',       //节点组类型(选填): normal(随意拖入拖出),inner(只能拖入不能拖出)
        //         dragGroupZIndex: 50  //节点组的默认z-index（选填，默认值：50）
        //     },
        //     node: {
        //         dragNodeZIndex: 250  //节点的默认z-index/2（选填，默认值250）
        //     },
        //     edge: {
        //         type: 'endpoint',    //线段连接类型
        //         shapeType: 'Bezier', //线条默认类型
        //         hasRadius: false,   //默认曼哈顿曲线不为圆角
        //         label: 'test',       //线条默认label
        //         arrow: true,         //线条默认是否带箭头
        //         arrowPosition: 0.5,  //箭头位置(0 ~ 1)
        //         arrowOffset: 0.0,    //箭头偏移
        //         arrowShapeType: '',  //自定义箭头样式
        //         Class: EdgeClassEnd,      //自己拓展的class,拖动连线的时候会采用该拓展类
        //         isExpandWidth: false,//增加线条交互区域
        //         defaultAnimate: false,//默认开启线条动画
        //         dragEdgeZindex: 499  //线段的默认z-index(选填，默认：499)
        //     },
        //     endpoint: {
        //         position: ['Top'],        //限制锚点位置['Top', 'Bottom', 'Left', 'Right'],
        //         linkableHighlight: true,//连线时会触发point.linkable的方法，可做高亮
        //         limitNum: 10,        //限制锚点的连接数目
        //         expandArea: {        //锚点过小时，可扩大连线热区
        //             left: 10,
        //             right: 10,
        //             top: 10,
        //             botton: 10
        //         }
        //     },
        //     zoomGap: 0.001,         //鼠标放大缩小间隙设置
        //     autoFixCanvas: {     //节点拖动或连线拖动到画布边缘时，画布自动延展
        //         enable: false,
        //         autoMovePadding: [20, 20, 20, 20] //触发自动延展的画布内边距
        //     },
        //     autoResizeRootSize: true, // 自动适配root大小，默认为true
        //     isMouseMoveStopPropagation: true, // 拖动事件是否阻止冒泡
        // },
        // global: {                //自定义配置，会贯穿所有canvas，group，node，edge，endpoint对象
        //     isScopeStrict: false   //scope是否为严格模式(默认为false)
        // }
    });
    canvas.draw({
        nodes: nodes.value.nodeArr, //节点信息
        edges: edges.edgeArr,
    })
    registerEventList()
})
// change info
const changeInfo = (value: string, ev: Event) => {
    console.log(nodes.value.nodeArr)
    console.log(currentNode.value)
    for (let i = 0; i < nodes.value.nodeArr.length; i++) {
        if (nodes.value.nodeArr[i].id === currentNode.value.id) {
            nodes.value.nodeArr[i] = currentNode.value;
            updateList();
        }
    }
    console.log('-------------')

    console.log(nodes.value.nodeArr)
    console.log(currentNode.value)
}

//***事件注册
const registerEventList = () => {
    canvas.on('system.node.click', (data: any) => { //注册节点点击事件
        console.log(data.node)
        currentNode.value = data.node.info
    });
}

// update node list
const updateList = () => {
    canvas.redraw({
        nodes: nodes.value.nodeArr, //节点信息
        edges: edges.edgeArr,
    });
}
</script>

<style scoped lang="less">
.container-middle {
    width: 100%;
    /* height: 100vh; */
    border: 1px solid #dddddd;
    border-radius: 10px;
    background-color: #eeeeee;
}

.container-left {
    width: 200px;
}

.container-right {
    width: 450px;
    /* background-color: aqua; */
    position: relative;
    z-index: 999;


    #btnShow {
        position: absolute;
        width: 20px;
        height: 40px;
        background-color: white;
        border-radius: 20px 0 0 20px;
        top: 50%;
        left: -20px;
        cursor: pointer;
        z-index: 998;
        display: flex;
        justify-content: center;
        align-items: center;

    }
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.container-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    height: calc(100vh - 50px);
}

.container-header {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;


    .container-logo {
        width: 200px;
        height: 100%;
        background-color: red;
    }

    .container-items {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: end;
        align-items: center;

    }

    .container-items>* {
        padding-right: 20px;
    }
}

.card-body {
    display: flex;
    flex-direction: column;
    padding: 0 10px;

    .card-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;

        .card-item-label {
            min-width: 60px;
            font-size: 15px;
        }

        .card-item-content {}
    }
}

.width-transition {
    transition: width 0.5s;
}

.ShowDialog {
    width: 0;
    padding: 0;
    margin: 0;
}

.ShowDialogIcon {
    transform: rotate(180deg);
}

.inputWidth {
    width: 200px;
}
</style>